<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { clothesPageApi,delclothByIdApi } from "@/apis/clothes"
import MenuItem from "@/components/MenuItem.vue";

// 管理员分页
const clothData = ref();
const clothTotal = ref();
const currentPage = ref(1);

// 是否开启按钮删除和修改
const clothDel = ref(true);
const clothUpdate = ref(true);
const clothSelect = ref();

// 修改弹窗
const clothDialog = ref(false);
// 修改管理员信息
const cloth = ref()

// 用户查询字段
const clothParam = ref({
  userName: "",
  clothesType: ""
});

onMounted(async () => {
  clothInit();
});

const clothInit = async () => {
  const clothRes = await clothesPageApi();
  clothData.value = clothRes.data.records;
  clothTotal.value = clothRes.data.total;
};

const clothSearch = async () => {
  const res = await clothesPageApi(null, clothParam.value);
  clothData.value = res.data.records;
  clothTotal.value = res.data.total;
};


const clothChange = async (e) => {
  currentPage.value = e;
  const res = await clothesPageApi({ currentPage: e }, clothParam.value);
  clothData.value = res.data.records;
  clothTotal.value = res.data.total;
};

// 管理员勾选
const clothSelectionChange = (e) => {
  clothSelect.value = e;
  if (e.length > 0) {
    // 可以进行删除和修改
    clothDel.value = false;
    if (e.length == 1) {
      clothUpdate.value = false;
    } else {
      clothUpdate.value = true;
    }
  }
  if (e.length == 0) {
    clothDel.value = true;
    clothUpdate.value = true;
  }
};

// 执行删除按钮
const clothDelBtn = async () => {
  for (let i = 0; i < clothSelect.value.length; i++) {
    const clothesId = clothSelect.value[i].clothesId;
    // 调用删除接口
    const res = await delclothByIdApi({ clothesId: clothesId });
    ElMessage.success(res.msg);
  }
  clothDel.value = true;
  clothInit();
};

// 出现修改弹窗
const clothUpdateBtn =  () => {
  clothDialog.value = true;
  // 进行深拷贝不修改原来的gender
  cloth.value = JSON.parse(JSON.stringify(clothSelect.value[0]));
};

// 执行修改按钮
const clothUpdateConfirm = async () => {
  // 调用修改接口
  cloth.value.avatarUrl = null
  cloth.value.bgUrl = null
  clothDialog.value = false;
  const res = await updateclothApi(cloth.value);
  clothInit();
  ElMessage.success(res.msg);
}
</script>
<template>
      <MenuItem class="pageIndex">
        <template #search>
          <div class="search-container">
            <el-input
              v-model="clothParam.userName"
              style="width: 400px; height: 40px"
              placeholder="请输入用户名称"
              clearable
            />
            <el-input
              v-model="clothParam.clothesType"
              style="width: 400px; height: 40px"
              placeholder="请输入衣服类型"
              clearable
            />
            <a-button
              type="primary"
              @click="clothSearch"
              style="width: 150px; height: 40px"
              >查询</a-button
            >
          </div>
        </template>
        <template #action>
          <a-button
            type="primary"
            :disabled="clothDel"
            :loading="loading"
            @click="clothDelBtn"
            style="margin: 0px 5px"
            >删除</a-button
          >
          <!-- <a-button
            type="primary"
            :disabled="clothUpdate"
            :loading="loading"
            @click="clothUpdateBtn"
            style="margin: 0px 5px"
            >修改</a-button
          > -->
        </template>
        <template #table>
          <el-table :data="clothData" style="width: 100%; height: 100%"
            @selection-change="clothSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column property="imgUrl" label="服装图片" width="200">
              <template #default="scope">
                <img
                  :src="scope.row.imgUrl"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column property="userName" label="用户名称" width="250" />
            <el-table-column property="clothesType" label="服装类型" width="250" />
            <el-table-column property="createTime" label="创建时间" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="clothTotal"
            :current-page="currentPage"
            @current-change="clothChange"
          />
        </template>
      </MenuItem>
      <el-dialog v-model="clothDialog" title="作品信息" width="500" draggable>
        <el-form
          label-width="auto"
          :model="cloth"
        >
          <el-form-item label="用户名称：">
            <el-input v-model="cloth.clothName" />
          </el-form-item>
          <el-form-item label="用户电话：">
            <el-input v-model="cloth.phone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="clothDialog = false">取消</el-button>
            <el-button type="primary" @click="clothUpdateConfirm">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>
<style scoped>

</style>
